<template>
  <div class="wrapper">
    <div class="content">
      <el-form :inline="true">
        <el-form-item label="平台：">
          <el-select style="width: 150px;" clearable v-model="platId" placeholder="请选择推广平台">
            <el-option v-for="item in platList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务发生时间：">
          <el-date-picker
            v-model="datarange"
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchItem(true)">查询</el-button>
          <el-button v-if="isTeamer || isManager" type="primary" @click="openDialog()">录入</el-button>
          <el-button type="primary" @click="exportExcel()">导出</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-table :height="tableHeight" :data="tableData"  border style="width: 100%;overflow-x: auto;" >
          <el-table-column label="推广平台" prop="platName" min-width="100" align="center"></el-table-column>
          <el-table-column label="业务时间" prop="saleDate" min-width="100" align="center"></el-table-column>
          <el-table-column label="花费($)" prop="cost" min-width="100" align="center"></el-table-column>
          <el-table-column label="访客数" prop="visitorNum" min-width="100" align="center"></el-table-column>
          <el-table-column label="展示数" prop="showNum" min-width="100" align="center"></el-table-column>
          <el-table-column label="点击数" prop="clickNum" min-width="100" align="center"></el-table-column>
          <el-table-column label="询盘数" prop="quoteNum" min-width="100" align="center"></el-table-column>
          <el-table-column label="咨询数" prop="queryNum" min-width="100" align="center"></el-table-column>
          <el-table-column label="销售平台" prop="salePlatName" min-width="100" align="center"></el-table-column>
          <el-table-column label="国家" prop="countryName" min-width="100" align="center"></el-table-column>
          <el-table-column label="操作时间" prop="opDate" min-width="100" align="center"></el-table-column>
          <el-table-column label="操作人" prop="opUser" min-width="100" align="center"></el-table-column>
          <el-table-column v-if="isTeamer || isManager" label="操作" min-width="80" align="center">
            <template slot-scope="scope">
              <el-button @click="openDialog(scope.row)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <el-dialog :fullscreen="true" :visible.sync="customerDialog" :show-close="false">
      <div slot="title">
        <h2 style="text-align:center;margin-bottom:0;">录入广告推广信息</h2>
      </div>
      <div class="form-wrapper">
        <el-button type="info" class="back-btn" icon="el-icon-back" circle @click="customerDialog = false;"></el-button>
        <el-form ref="form" :model="customForm" label-width="200px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="推广平台">
                 <el-select v-model="customForm.platId" placeholder="请选择推广平台">
                  <el-option v-for="item in platList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="销售平台">
                 <el-select v-model="customForm.salePlatId" placeholder="请选销售平台">
                  <el-option v-for="item in salePlatList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="业务时间">
                <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="customForm.saleDate" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="访客数">
                <el-input v-model="customForm.visitorNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="展示数">
                <el-input v-model="customForm.showNum"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="点击数">
                <el-input v-model="customForm.clickNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="询盘数">
                <el-input v-model="customForm.quoteNum"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="咨询数">
                <el-input v-model="customForm.queryNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="花费">
                 <el-input v-model="customForm.cost"></el-input>
              </el-form-item>
            </el-col>
             <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="国家">
                <el-select ref="labelSelected" :filterable="true" v-model="customForm.countryCode" placeholder="请选择国家">
                  <el-option v-for="item in countryList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="saveForm">录入</el-button>
            <el-button @click="customerDialog = false;">关闭</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import formUtil from '@/utils/formUtil'
  import DatePhase from  '@/components/sale/date-phase'

  export default {
    data () {
      return {
        pageSize: 10,
        page:1,
        totalPage: 0,
        datarange: '',
        countryData: [],
        tableData: [],
        assessUsers: [],
        assessUsersName: '',
        platId: '',
        customForm: {
          platId: '',
          cost: '',
          salePlatId: '',
          saleDate: '',
          saleValue: '',
          visitorNum: '',
          showNum: '',
          clickNum: '',
          quoteNum: '',
          queryNum: '',
          countryCode: '',
          countryName: ''
        },
        formVerify: {
          platId: '请选择推广平台',
          salePlatId: '请选择销售平台',
          saleDate: '请输入业务时间'
        },
        customerDialog: false,
        platList: [],
        salePlatList: [],
        orderStatusList: [{
          id: '11',
          name: '完成'
        },{
          id: '1',
          name: '已售'
        },{
          id: '0',
          name: '预售'
        },{
          id: '-1',
          name: '退款'
        },{
          id: '-2',
          name: '无效订单'
        }],
        countryList: [],
        currencyList: [],
        bigModule: '200',
        isTeamer: false,
        tableHeight: window.tableHeight
      }
    },
    components: {
      DatePhase
    },
    computed: {
      isManager() {
        return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1265175017173348354')
      }
    },
    activated() {
      this.tableHeight = document.documentElement['clientHeight'] - 270
      window.onresize = () => {
        this.tableHeight = document.documentElement['clientHeight'] - 270
      }
    },
    mixins: [dingMixin],
    async mounted(){
      let data = await this.$httpN.postQ('mpb/plat/tree', {isPo: 1});
      data.forEach((item) => {
        if(item.children && item.id === '200') {
          this.platList.push(...item.children)
          let pArr = item.manager.split(',');
          let pArr2 = item.members.split(',')
          if(pArr.includes(this.userInfo.dingId) || pArr2.includes(this.userInfo.dingId)) this.isTeamer = true;
          item.children.forEach((child) => {
            let cArr = child.manager.split(',')
            let cArr2 = child.members.split(',')
            if(cArr.includes(this.userInfo.dingId) || cArr2.includes(this.userInfo.dingId)) this.isTeamer = true;
          })
        }
      })

      let data2 = await this.$httpN.postQ('mpb/plat/tree', {isPo: 0});
      data2.forEach((item) => {
        if(item.children) {
          this.salePlatList.push(...item.children)
        }else {
          this.salePlatList.push(item)
        }
      })

      this.searchItem(true);
      this.countryList = await this.$httpN.postQ('mpb/market/listCountry', {level: '', query: ''}, false);
    },
    methods: {
      openDialog(item) {
        if(item) {
          let editData = formUtil.deepCopy(item);
          this.customForm = editData;
        }else{
          formUtil.resetData(this.customForm);
        }
        this.customerDialog = true;
      },
      sizeChangeHandle(limit) {
        this.pageSize = limit;
        this.searchItem(true);
      },
      currentChangeHandle(page) {
        this.page = page;
        this.searchItem();
      },
      async searchItem(init) {
        if(init) this.page = 1;
        let data = await this.$httpN.postQ('mpb/mpbpo/list',{
          beginDate: this.datarange? this.datarange[0]: '',
          endDate: this.datarange? this.datarange[1]: '',
          platId: this.platId ? this.platId: this.bigModule,
          page: this.page,
          limit: this.pageSize
        })
        this.tableData = data.list
        this.totalPage = data.totalCount
      },
      async saveForm(){
        this.customForm.countryName = this.$refs['labelSelected'].selectedLabel;
        if(!formUtil.verifyData(this.customForm, this.formVerify)) return;
        if(!await this.$httpN.postB('mpb/mpbpo/save', this.customForm,false)) return;
        this.customerDialog = false;
        formUtil.submitSuccess('保存成功');
        this.searchItem(true);
      },
      removeItem(id) {
        formUtil.submitConfirm('此操作将永久删除该记录, 是否继续?', async ()=> {
          if(!await this.$httpN.postB('mpb/mpbpo/delete', [id], false)) return;
          formUtil.submitSuccess('删除成功');
          this.searchItem(true)
        })
      },
      async exportExcel() {
        if(!this.datarange[0] || !this.datarange[1]) return this.$message.error('请选择开始时间和结束时间')

        let data = await this.$httpN.get('mpb/mpbpo/exportAd', {
          beginDate: this.datarange? this.datarange[0]: '',
          endDate: this.datarange? this.datarange[1]: '',
          platId: this.platId ? this.platId: this.bigModule,
        }, 'blob')

        this.downFile(data, `广告推广订单.xls`);
      },
      downFile(blob, fileName) {
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName);
        } else {
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          window.URL.revokeObjectURL(link.href);
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

  .form-wrapper .el-select.el-select--medium{
    width: 100%;
  }
  .form-wrapper{
    width: 70%;
    margin: 0 auto;
    min-width: 990px;
    padding: 70px;
    padding-top: 10px;
    padding-left:0;
    position:relative;
  }
  .status-line{
    position:fixed;
    top: 200px;
    right: 140px;
    height: 240px;
  }
  .notice{
    margin-top:10px;
    color:red;
    padding-left:120px;
  }
  .back-btn{
    position: fixed;
    top: 50px;
    left: 50px;
  }
</style>
